<template>
  <div class="dashboard-editor-container">
    <!-- <div class="chart-wrapper1"> -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="12">
          多媒体类型：
          <el-radio v-model="radio1" label="1" style="color:#2ca7e9">视频</el-radio>
          <el-radio v-model="radio1" disabled label="2" style="color:#2ca7e9">文字</el-radio>
          <el-radio v-model="radio1" disabled label="3" style="color:#2ca7e9">电话</el-radio>
        </el-col>
      </el-row>
      <el-form :model="seatForm" style="margin-top:10px;" size="mini" label-position="top" ref="seatForm">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label='班' prop='company'>
              <el-select v-model="seatForm.company" placeholder="请选择公司" @change="queryTeam">
                <el-option key="index" label="全部" value="">
                </el-option>
                <el-option v-for="item in companyList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="组" prop="team">
              <el-select v-model="seatForm.team" filterable placeholder="请选择班组" @change="agentQuery">
                <el-option key="index" label="全部" value="">
                </el-option>
                <el-option v-for="item in teamList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="6">
            <el-form-item label="坐席" prop="agent">
              <el-select v-model="seatForm.agent" multiple collapse-tags filterable placeholder="请选择坐席">
                <el-option key="index" label="全部" value="">
                </el-option>
                <el-option v-for="item in agentList" :key="item.AGENTID" :label="(item.AGENTID+'-'+item.AGENTNAME)"
                  :value="item.AGENTID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="querySeat">查询
            </el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('seatForm')">重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- </div> -->
    <el-row class="main">
      <el-col :span="24" class="left-col">
        <el-card>
          <div slot="header" class="clearfix">
            <el-button style="float: left; padding: 3px 0" type="text" @click="evaluatingShow">六维评测✄</el-button>
            <!-- <el-button style="margin-left:4px; padding: 3px 0" type="text" @click="targetMaintenance">目标值维护</el-button> -->
            <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="this.detailShow">详情>></el-button> -->
          </div>
          <div :style="{width:'100%'}">
            <ve-radar :data="radarData" ref="radar" :settings="radarSettings" :extend="radarExtend"
              :data-empty="radarEmpty">
            </ve-radar>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="12" class="right-col">
        <el-card>
          <div slot="header" class="clearfix">
            <el-button style="float: left; padding: 3px 0" type="text">实时坐席状态</el-button>
          </div>
          <div class="circle-position">
            <ve-ring :data="ringData1" :extend="ringExtend1" :settings="ringSettings1" :data-empty="ringEmpty">
            </ve-ring>
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <el-row class="main" style="margin-top:20px">
      <el-col class="total-col">
        <el-card>
          <div slot="header" class="clearfix">
            <el-col>
              <el-button style="float: left; padding: 3px 0" type="text">话量趋势对比图</el-button>
              <!-- <el-radio v-model="radio2" label="total"  style=" padding: 12px 20px;color:#2ca7e9">合计</el-radio>
            <el-radio v-model="radio2" label="sub" style=" padding: 12px 20px;color:#2ca7e9;margin-left:0">分队列查看</el-radio>
            <el-button style="float: right; padding: 3px 0" type="text" @click="this.rankShow">详情>></el-button> -->
            </el-col>
          </div>
          <el-form :model="form" size="mini" label-position="top" ref="form">
            <el-row :gutter="10" style="margin-bottom:20px;">
              <el-col :span="3">
                <el-form-item label='开始时间：' prop="startTime">
                  <el-time-select style="width:100%;" placeholder="起始时间" default-value="08:00" clearable
                    v-model="form.startTime" :picker-options="{
                        start: '08:00',
                        step: '00:30',
                        end: '20:00',
                        maxTime: form.endTime
                      }">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label='结束时间：' prop="endTime">
                  <el-time-select style="width:100%;" placeholder="结束时间" default-value="12:00" clearable
                    v-model="form.endTime" :picker-options="{
                            start: '08:00',
                            step: '00:30',
                            end: '20:00',
                            minTime: form.startTime
                          
                          }">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <!-- <span>时间粒度</span> -->
                <el-form-item label='间隔时间：' prop="timeInterval">
                  <el-select v-model="form.timeInterval" style="width:100%;" filterable placeholder="请选择时间粒度">
                    <el-option v-for="item in timeIntervalList" clearable :key="item.value" :label="item.name"
                      :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="2" :md="3" class="searchBtnMarginTop">
                <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询
                </el-button>
              </el-col>
              <el-col :lg="2" :md="3" class="searchBtnMarginTop">
                <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <ve-histogram ref="histogram" style="width:100%;" :data="histogramData1" :extend="histogramExtend1"
            :settings="histogramSettings1" :grid="grid" :colors="histogramColors1" height="420px"></ve-histogram>
        </el-card>

      </el-col>
    </el-row>
    <keep-alive>
      <!-- <component :is="dialogList.siteTendency" :option="dialogOptions"></component> -->
    </keep-alive>
    <keep-alive>
      <!-- <component :is="dialogList.agentList" :option="dialogOptionsA"></component> -->
    </keep-alive>
    <keep-alive>
      <component :is="dialogList.targetValMain" :option="dialogOptionv" @refreshTable="queryModelChart"></component>
    </keep-alive>

    <el-dialog title="雷达图指标配置" :visible.sync="isChoose" @close="closeUser" width="50%" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-transfer :titles="['可选指标', '已选指标']" v-model="value1" :data="data" @change="handleChange"></el-transfer>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" type="primary">确认</el-button>
            <el-button size="mini" @click="reset" >取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import toolBox from "@/common/utils/toolBox";
  import siteTendency from "./dialog/siteTendency";
  import targetValMain from "./dialog/targetValMain";
  // import agentList from "./dialog/agentList";
  import veRadar from "v-charts/lib/radar";
  import veLine from "v-charts/lib/line";
  import veRing from "v-charts/lib/ring";
  import veHistogram from "v-charts/lib/histogram";
  import queryQueDetail from "@/message/siteManagement/queueDetail/query";
  import 'v-charts/lib/style.css';

  // 发送接口
  import request1 from "@/common/utils/requestYg";
  // 班组接口
  import teamManage from "@/message/seat-manage/setaTeam/teamManage";
  // 坐席维护接口
  import agentManage from "@/message/seat-manage/SeatInfoManage/agentManage";
  // 趋势对比图-电话  查询 
  import y007 from "@/message/siteManagement/seatingOverview/y007";
  // 六维查询
  import y008 from "@/message/siteManagement/seatingOverview/y008";
  import agentQuery from "@/message/siteManagement/seatStatusDetail/agentQuery";
  import agentStatus from "@/message/siteManagement/seatingOverview/agentStatus";
  //六维指标查询
  import dataQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import request from "@/common/utils/requestWFM";

  export default {
    name: '',
    components: {
      veRadar,
      veLine,
      veRing,
      veHistogram
    },
    data() {
      const generateData = _ => {
        const data = [{
            key: 1,
            label: "在线坐席数"
          },
          {
            key: 2,
            label: "值机时长"
          },
          {
            key: 3,
            label: "工时利用率"
          },
          {
            key: 4,
            label: "人均产能"
          },
          {
            key: 5,
            label: "示忙次数"
          },
          {
            key: 6,
            label: "示忙时长"
          },
          {
            key: 7,
            label: "呼入进线量"
          },
          {
            key: 8,
            label: "呼入接通量"
          },
          {
            key: 9,
            label: "呼入通话时间"
          },
          {
            key: 10,
            label: "呼入通话均长"
          },
          {
            key: 11,
            label: "呼入振铃时长"
          },
          // {key: 12, label: "呼出出线量"},
          // {key: 13, label: "呼出接通量"},
          {
            key: 14,
            label: "呼出通话时间"
          },
          {
            key: 15,
            label: "呼出通话均长"
          },
          {
            key: 16,
            label: "呼出振铃时长"
          }
        ];

        return data;
      };
      return {
        dictionaryOption: [],
        isChoose: false,
        // dataQ: [],
        data: [],
        // data: generateData(),
        // value1: [1,7,4,3,6,5],
        value1Backup: [],
        value1: ['establishedcount', 'establisheddurn', 'ringingcount', 'ringingdurn', 'aftercallworkcount',
          'aftercallworkdurn'
        ],
        loading: false,
        options: {
          group: 'mission'
        },
        seatForm: {
          company: "",
          team: "",
          agent: []
        },
        teamList: [],
        companyList: [],
        agentList: [],
        currentPage: 1,
        //1页左上
        radarData: {
          columns: ['情况', '通话次数', '通话时长', '振铃时长', '振铃次数', '整理次数', '整理时长'],
          rows: [],
        },
        radarEmpty: false,
        radarExtend: {
          series: {
            // type: "bar",
            // barGap: "-100%"
            color: ['#147e88', '#409eff'],
            label: {
              show: false,
              // absolute:'insideLeft',             
              fontSize: 15,
              distance: 5,
              formatter: (params) => {
                // console.log("六维评测的params",params);
                return params.value
              },
            },
          },
          radar: {
            name: {
              // formatter:'{value}',
              formatter: (str) => {
                let val = this.radarData.rows[0][str];
                // let val1 = this.radarData.rows[1][str];
                if (val == undefined) {
                  val = 0
                }
                if (str == '工时利用率') {
                  val = val  + '%'
                }
                if(str == '通话时长' || str == '振铃时长' || str == '整理时长'){
                  val = this.secondFormat(val)
                }
                // if(val1==undefined){
                //   val1 = 0
                // }
                return str + "\n" + `{b|${val}}`
              },
              rich: {
                a: {
                  color: 'fff',
                  lineHeight: 20
                },
                b: {
                  color: '#147e88',
                  align: 'center',
                  fontSize: 15,
                  padding: 2,
                },
                c: {
                  color: '#409eff',
                  align: 'center',
                  fontSize: 15,
                  padding: 2,

                },
              },
              textStyle: {
                fontSize: 15,
                color: '#000'
              }
            },
            shape: "polygon",
          },
          legend: {
            show: true,
            x: 'right',
            // y:'bottom',
          },
        },
        radarSettings: {
          dataType: {
            '工时利用率': 'percent'
          },
          // itemStyle:{
          //   show:false
          // },
          // labelMap: {
          //   '情况':'option',
          //   '人均产能':'人均产能1',
          //   'AHT':'AHT1',
          //   '满意度':'满意度1',
          //   '遵时率':'遵时率1',
          //   'NPS推荐率':'NPS推荐率1',
          //   '差错率':'差错率1'
          // },
          areaStyle: ["#000"],
        },
        ringData1: {
          columns: ['坐席状态', '人数'],
          rows: [{
              '坐席状态': '签入',
              '人数': 0
            },
            {
              '坐席状态': '签出',
              '人数': 0
            },
            {
              '坐席状态': '挂机',
              '人数': 0
            },
            {
              '坐席状态': '就绪',
              '人数': 0
            },
            {
              '坐席状态': '摘机',
              '人数': 0
            },
            {
              '坐席状态': '拨号',
              '人数': 0
            },
            {
              '坐席状态': '振铃',
              '人数': 0
            },
            {
              '坐席状态': '示忙',
              '人数': 0
            },
            {
              '坐席状态': '话后小结',
              '人数': 0
            },
            {
              '坐席状态': '保持',
              '人数': 0
            },
            {
              '坐席状态': '咨询',
              '人数': 0
            },
            {
              '坐席状态': '内部通话',
              '人数': 0
            },
            {
              '坐席状态': '呼出通话',
              '人数': 0
            },
            {
              '坐席状态': '呼入通话',
              '人数': 0
            },
          ],
          // columns:['签入','签出','挂机','就绪','摘机','拨号','振铃','示忙','话后小结','保持','咨询','内部通话','呼出通话','呼入通话'],
          // rows:[{'签入':"0",'签出':"0",'挂机':"0",'就绪':"0",'摘机':"0",'拨号':"0",'振铃':"0",'示忙':"0",'话后小结':"0",'保持':"0",'咨询':"0",'内部通话':"0",'呼出通话':"0",'呼入通话':"0"}]
        },
        ringEmpty: false,
        ringExtend1: {
          title: {
            text: '今日累计签入:',
            textStyle: {
              fontSize: 25,
              fontWeight: 'normal',
            },
            subtext: "0",
            subtextStyle: {
              fontSize: 40,
              fontWeight: 'bolder'
            },
            x: 'center',
            y: 235

          },
          series: {
            color: ['#ef5b9c', '#b7704f', '#6e6b41', '#59dcc1', '#2ca7e9', '#ff921d', '#4daf5d', '#6372b9', '#a7d056',
              '#e1b737', '#ed6856', '#918ab7', '#5cc6b6', '#147e88'
            ],
            // formatter:'{b}:{c}({d}%)',
            lable: {
              // show:false
            }
          },
          legend: {
            show: true,
            // orient:'vertical',
            // x:'right',
            // y:'bottom',
            data: ['签入', '签出', '挂机', '就绪', '摘机', '拨号', '振铃', '示忙', '话后小结', '保持', '咨询', '内部通话', '呼出通话', '呼入通话'],
            // formatter:function(name){
            //   var index = 0;
            //   var clientlabels = ['通话中','话后处理','示忙','三方通话','呼叫拨号','就绪','小休','转TPIN','振铃','其他'];
            //   var clientcounts = ['310','70','25','4','2','11','9','3','2','4'];
            //   clientlabels.forEach(function(value,i){
            //     if(value==name){
            //       index = i;
            //     }
            //   });
            //   return name 
            // }
          },
        },
        ringSettings1: {
          radius: ['45%', '60%'],
          label: {
            // show:false,
            formatter: '{b}:{c}({d}%)'
          },
          offsetY: 270,
        },
        histogramColors: ['#fbec97', '#f5a286', '#c6a7f8', '#61a8e4', ],
        histogramColors1: ['#ef5b9c', '#f5a286', '#c6a7f8', '#e1b737', '#409eff', 'green'],
        histogramData1: {
          columns: ['WORKTIME', '匹配成功时长', '匹配成功次数', '振铃时长', '振铃次数', '视频建立时长', '在线坐席数'],
          rows: [

          ]
        },
        grid: {
          left: 20,
          right: 40
        },
        histogramExtend1: {
          dataZoom: [{
            type: 'slider', //图表下方的伸缩条
            show: true, //是否显示
            //  　　　　realtime : true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          }],
          xAxis:{
          },

          //       xAxis: {
          //     // type: 'value',
          //     axisLabel:{
          //      interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
          //      rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
          //     }
          // },
         label: {
            // normal: {
            //     formatter: `{c}\n`
            // }
            // offset: [0, 0],
        },
          series: {
            // barWidth:9,
            barGap: "100%",
            // stack: '堆叠', //堆叠柱状图在此设置成统一名称即可            
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 9
                  }
                }
              }
            }
          },
          legend: {
            y: "top"
          }
        },
        histogramSettings1: {
          showLine: ['工时利用率'],
          axisSite: {
            right: ['工时利用率'],
          },
          yAxisType: ["normal", "percent"],
          yAxisName: ["数值", "比率"],
        },
        loading: false, //loading遮罩
        radio1: "1",
        tableData1: [],
        totalRcrdNum: 0,
        timeIntervalList: [{
            name: "10分钟",
            value: "10"
          },
          {
            name: "15分钟",
            value: "15"
          },
          {
            name: "30分钟",
            value: "30"
          },
          {
            name: "60分钟",
            value: "60"
          },
        ],
        form: {
          team: '',
          company: '',
          timeInterval: "10",
          startTime: '08:00',
          endTime: '12:00',
        },

        tableData: [],
        dialogList: {
          siteTendency,
          // agentList,
          targetValMain,
        },
        // dialogOptions: {
        //   isShow: false
        // },
        // dialogOptionsA: {
        //   isShow: false
        // },
        dialogOptionv: {
          isShow: false
        },
        brnoList: [],
      }
    },
    computed: {},
    created: function () {
      this.queryClass()
      this.dictionaryQuery();
      this.queryModelChart();
      this.agentQuery()
      this.query();
      // this.queryDetail();
      // this.comQuery();
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.resizeTheChart);
    },
    mounted() {
      // this.dictionaryQuery()
      this.brnoList = toolBox.formatTreeData(
        this.brnoList,
        "orgno",
        "superno"
      );
      window.addEventListener("resize", this.resizeTheChart);

      // this.radarEmpty = (this.radarData.rows.length == 0);
      // this.ringEmpty = (this.ringData1.rows.length == 0);
    },
    watch: {
      radio1: function (newVal, oldVal) {
        this.chooseFormat();
        this.queryModelChart();
        this.query();
        // this.queryDetail();
      },
    },
    methods: {
      // 秒格式化
      secondFormat(value){
        return toolBox.formatSeconds(value)
      },
      resizeTheChart() {
        if (this.$refs.histogram) {
          this.$refs.histogram.resize();
        }
        if (this.$refs.radar) {
          this.$refs.radar.resize();
        }
      },
      // 查询坐席
      async agentQuery() {
        let resBody = new agentManage();
        resBody.data.OPERATION = '5'
        resBody.data.AGENTCLASS = this.seatForm.company
        resBody.data.AGENTTEAM = this.seatForm.team
        // resBody.data.PAGEFLAG = '5';
        // resBody.data.PAGEROWNUM = 1000
        // resBody.data.CURRPAGE = 1
        let response = await request1(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.agentList = response.RSP_BODY.struct;
          // this.querySeat()
        } else {
          this.$message({
            type: "error",
            message: '该组下没有关联的坐席'
          })
          // this.seatForm.team = ''
          this.agentList = []
        }
      },
      // 查询班
      async queryClass() {
        let resBody = new teamManage();
        resBody.data.OPERATION = "4";
        resBody.data.TEAMTYPE = "1";
        let response = await request1(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.companyList = response.RSP_BODY.struct;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
          this.companyList = []
        }
      },
      // 查询组
      async queryTeam() {
        this.agentOptions = []
        this.seatForm.team = ''
        if (this.seatForm.company == '') {
          this.seatForm.team = ''
          return
        }
        let resBody = new teamManage();
        resBody.data.OPERATION = '4'
        resBody.data.TEAMTYPE = '2'
        resBody.data.PAGEFLAG = 4
        resBody.data.CURRPAGE = 1
        resBody.data.PAGEROWNUM = 100
        resBody.data.HTEAMID = this.seatForm.company
        let response = await request1(resBody);
        if (response.SYS_HEAD.ReturnCode === "000000") {
          this.teamList = response.RSP_BODY.struct
          this.agentQuery()
        } else {
          this.$message({
            type: "error",
            message: '该班下没有对应组'
          });
          this.teamList = []
          // this.seatForm.team = ''
          this.seatForm.company = ''
        }
      },
      // 数据字典
      async dictionaryQuery() {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = 'AGENTPARA'
        // resBody.data.FIELDNAME = this.form.name;
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 200
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.dictionaryOption = response.BODY.FIEDATA
          let arr = response.BODY.FIEDATA;
          arr.forEach(item => {
            this.data.push({
              key: item.FIELDKEY,
              label: item.FIELDVALUE
            })
          })
          this.chooseFormat();
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      querySeat() {
        this.queryModelChart();
        // this.queryDetail();
        this.query()
      },
      async chooseFormat() {
        this.radarData.columns = ['情况']
        this.histogramData1.columns = ['WORKTIME'];
        for (let i = 0; i < this.value1.length; i++) {
          this.dictionaryOption.forEach(value => {
            if (value.FIELDKEY == this.value1[i]) {
              this.radarData.columns.push(value.FIELDVALUE)
              this.histogramData1.columns.push(value.FIELDVALUE);
            }
          })
        }
        // console.log("this.histogramData1.column", this.histogramData1.columns);
        // console.log("this.radarData.columns", this.radarData.columns);
      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // if (this.value1.length != 6) {
        //   this.isChoose = true;
        //   this.$message.warning(`已选指标个数只能为六`);
        // } else {
          this.isChoose = false;
          this.value1 = JSON.parse(JSON.stringify(this.value1Backup))
          this.chooseFormat()
        // }
      },
       reset(){
        this.value1 = JSON.parse(JSON.stringify(this.value1Backup ))
        this.isChoose = false
        this.chooseFormat();
      },
      addType() {
        // if (this.value1.length != 6) {
        //   this.isChoose = true;
        //   this.$message.warning(`已选指标个数只能为六`);
        // } else {
          this.value1Backup = JSON.parse(JSON.stringify(this.value1))
          this.isChoose = false;
          this.chooseFormat();
          this.queryModelChart();
          this.query()
        // }
      },
      openCreate() {

      },
      handleChange(value, direction, movedKeys) {
        this.value1 = value;
      },
      //六维图查询
      async queryModelChart() {
        let resBody = new y008();
        // resBody.data.type = "agent";
        // resBody.data.eleArr = this.dataQ;
        // resBody.data.monikey = this.radio1=="1"?"视频":this.radio1=="2"?"电话":"文字";
        resBody.data.MEDIATYPE = this.radio1 == "1" ? "video" : this.radio1 == "2" ? "voice" : "chat";
        resBody.data.MONIKEY1 = this.value1[0]
        resBody.data.MONIKEY2 = this.value1[1]
        resBody.data.MONIKEY3 = this.value1[2]
        resBody.data.MONIKEY4 = this.value1[3]
        resBody.data.MONIKEY5 = this.value1[4]
        resBody.data.MONIKEY6 = this.value1[5]
        if (this.seatForm.agent.length == 0) {
          this.seatForm.team = this.seatForm.company == '' ? '' : this.seatForm.team
          let agent = []
          this.agentList.forEach(item => {
            agent.push("'" + item.AGENTID + "'")
          })
          resBody.data.AGENTID = this.seatForm.company == '' ? '' : agent.join(',')
        } else {
          let arr = []
          this.seatForm.agent.forEach(item => {
            arr.push("'" + item + "'")
          })
          resBody.data.AGENTID = arr.join(',')
        }
        let response = await request1(resBody);
        var vueIns = this;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.radarData.rows = [{
            '情况': '实际值'
          }];
          // this.list3 = response.RSP_BODY.struct[1].resultM;
          // this.list2 = response.RSP_BODY.struct[1].resultS.result;
          let list1 = response.RSP_BODY.detail
          for (var p in list1) {
            //   // let a = p.split("-")[2];
            this.radarData.rows[0][p] = list1[p];
            //   this.radarData.rows[1][p] = this.list3[p];
          }
          // console.log('rows', this.radarData.rows)
          // console.log('columns', this.radarData.columns)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" +
              response.SYS_HEAD.ReturnCode +
              "，错误信息：" +
              response.SYS_HEAD.ReturnMessage
          });
        }
      },
      //坐席分布图查询
      queryDetail() {
        this.loading = true;
        let resBody = new agentStatus();
        // resBody.data.company = this.seatForm.company;
        // resBody.data.group = this.seatForm.team;
        // resBody.data.agentid = this.seatForm.agent;
        request1(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableData = response.RSP_BODY || [];
              // let keyMap={"login":"签入","LoggedOut":"签出","OnHook":"挂机","WaitForNextCall":"就绪",
              // "OffHook":"摘机","CallDialing":"拨号","CallRinging":"振铃","NotReadyForNextCall":"示忙","AfterCallWork":"话后小结",
              // "CallOnHold":"保持","CallConsult":"咨询","CallInternal":"内部通话","CallOutbound":"呼出通话","CallInbound":"呼入通话"};
              let keyMap = {
                "login": "签入",
                "ready": "就绪",
                "matched": "已匹配",
                "ringing": "振铃",
                "answer": "接听",
                "established": "通话中",
                "release": "挂断",
                "aftercallwork": "话后小结",
                "notready": "示忙",
                "breaktype": "小休",
                "logout": "签出"
              };
              let objs = Object.keys(this.tableData).reduce((newData, key) => {
                let newKey = keyMap[key] || key
                newData[newKey] = this.tableData[key]
                return newData
              }, {});
              this.ringData1.rows = [];
              this.ringExtend1.title.subtext = response.RSP_BODY.login + "";
              for (var p in objs) {
                // if(p=="签入"){
                //   this.ringExtend1.title.subtext= objs[p]+""
                // }
                if (p != "TodayLoggedIn") {
                  let a = {};
                  a["坐席状态"] = p;
                  a["人数"] = objs[p];
                  this.ringData1.rows.push(a)
                }
                // let a = {};
                // a["坐席状态"]=p;
                // a["人数"]=objs[p];
                // this.ringData1.rows.push(a)
              }
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })
      },
      // detailShow(row, column, cell, event) {
      //   this.dialogOptions.isShow = true;
      //   this.dialogOptions.title = "现场趋势";
      //   // this.dialogOptions.ODEDVSNLIST = this.ODEDVSNLIST;
      // },
      // agentShow(row, column, cell, event) {
      //   this.dialogOptionsA.isShow = true;
      //   this.dialogOptionsA.title = "坐席列表";
      // },
      targetMaintenance(row, column, cell, event) {
        //debugger
        this.dialogOptionv.isShow = true;
        this.dialogOptionv.title = "六维元素目标值维护";
        this.dialogOptionv.tableData = this.list3;
        // this.dialogOptions.ODEDVSNLIST = this.ODEDVSNLIST;
      },
      // rankShow(row, column, cell, event){
      //   console.log("点击了详情");
      //   this.dialogOptionsB.dialogOptions = this.dialogOptions;
      //   this.dialogOptionsB.isShow = true;
      //   this.dialogOptionsB.title = "现场排名";
      // },
      //指标配置
      evaluatingShow(row, column, cell, event) {
        this.value1Backup = JSON.parse(JSON.stringify(this.value1))
        this.isChoose = true;
      },
      // 重置查询条件
      clearForm(item) {
        // 重置表格
        this.$refs["" + item].resetFields();
      },

      async query() {
        this.loading = true;
        let self = this;
        let resBody = new y007();
        resBody.data.MEDIATYPE = this.radio1 == "1" ? "video" : this.radio1 == "2" ? "chat" : "voice";
        resBody.data.TIMEINTERVAL = this.form.timeInterval ? this.form.timeInterval : "10";
        resBody.data.STARTTIME = this.form.startTime ? this.form.startTime.replace(/\:/g, "") : "0800";
        resBody.data.ENDTIME = this.form.endTime ? this.form.endTime.replace(/\:/g, "") : "1200";
        if (this.seatForm.agent.length == 0) {
          this.seatForm.team = this.seatForm.company == '' ? '' : this.seatForm.team
          let agent = []
          this.agentList.forEach(item => {
            agent.push("'" + item.AGENTID + "'")
          })
          resBody.data.AGENTID = this.seatForm.company == '' ? '' : agent.join(',')
        } else {
          let arr = []
          this.seatForm.agent.forEach(item => {
            arr.push("'" + item + "'")
          })
          resBody.data.AGENTID = arr.join(',')
        }
        resBody.data.MONIKEY1 = this.value1[0]
        resBody.data.MONIKEY2 = this.value1[1]
        resBody.data.MONIKEY3 = this.value1[2]
        resBody.data.MONIKEY4 = this.value1[3]
        resBody.data.MONIKEY5 = this.value1[4]
        resBody.data.MONIKEY6 = this.value1[5]
        request1(resBody)
          .then(response => {
            // 每次赋值前都要清除histogramData1.rows
            self.histogramData1.rows = [];
            if (response.SYS_HEAD.ReturnCode === "000000") {
              response.RSP_BODY.struct.forEach(function (item, index, value) {
                item.WORKTIME = toolBox.timeFormat2Time(item.WORKTIME);
                self.histogramData1.rows.push(item);
              })
              // console.log("self.histogramData1.columns", self.histogramData1.columns);
              // console.log("self.histogramData1.rows", self.histogramData1.rows);
            } else if (response.SYS_HEAD.ReturnCode === "999999") {
              this.$message({
                type: "success",
                message: "该时间段无趋势数据"
              });
              // this.tableData=[];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              // this.tableData=[];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });

      },
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-table .cell {
    white-space: pre-line;
  }

  .right-col {
    height: 100%;
    // background: #ffffff;
    margin-left: 15px;
    margin-top: 10px;
    // margin-bottom: 20px;
  }

  .left-col {
    height: 100%;
    // background: #ffffff;
    margin-top: 10px;

  }

  .main {
    margin-bottom: 5px;
    height: 100%;
    background: #f0f2f5;

    .total-col {
      width: 100%;
      // height: 100%;
      background: #ffffff;
    }

    .left-col {
      height: 100%;
      background: #ffffff;
    }

    .right-col {
      height: 100%;
      background: #ffffff;
      // margin-left:20px;
    }

    .el-card {
      height: 100%;
    }

    .linstyel {
      padding-top: 30px;
      height: 100%;
    }

    .main1 {
      height: 40%;
    }

    .main2 {
      height: 40%;
    }

    .class1 {
      margin-left: 20px;
      display: inline-block;
      width: 10px;
      height: 10px;
      //  border: 1px solid #2ca7e9;
      background-color: #2ca7e9;
    }

    .class2 {
      margin-left: 20px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #19d4ae;
      //  border: 1px solid red;
    }
  }

  .dashboard-editor-container {
    height: 100%;
    padding: 10px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .chart-wrapper1 {
      background: #f5f5f5;
      padding: 16px 16px 0;
      margin-bottom: 2px;
      color: #2ca7e9;
    }

    .chart-wrapper2 {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

      height: 100%;
      float: left;
    }

    .a {
      float: right;

    }
  }

</style>
